<template>
	<div class="box" id="box">
		<div class="common-layout">
			<el-container class="container">
				<el-header>
					<span></span>
				</el-header>

				<el-container class="main">
					<el-main>
						<div>
							<quizBox></quizBox>
						</div>
					</el-main>

					<el-aside class="sticky-aside">
						<div class="aside_box">
							<qstRecord></qstRecord>
							<div class="timer">
								<el-row>
									<el-col :span="16">
										<el-countdown
											title="倒计时"
											:value="time"
										/>
									</el-col>
								</el-row>
							</div>
						</div>
					</el-aside>
				</el-container>
			</el-container>
		</div>
	</div>
</template>

<script setup lang="ts">
import quizBox from '@/components/quizBox/index.vue'
import qstRecord from '@/components/quizBox/qstRecord.vue'
import { ref } from 'vue'
const time = ref(Date.now() + 1000 * 60 * 60 * 1)
// import { onMounted } from 'vue';
// onMounted(() => {
//   // 确保 correctHeight 在首次加载时立即应用
//   adjustHeight();
// });

// function adjustHeight() {
//   let box = document.getElementById('box') as HTMLElement
//   if (box) {
//     box.style.height = window.innerHeight + 'px';
//     console.log(window.innerHeight)
//   }
// }
</script>

<style scoped>
.box {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
}
.el-header {
	height: 0px;
}
.common-layout {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	height: 100%;
	background-color: white;
	width: 1200px;
	border-radius: 20px;
}
.el-main {
	height: auto;
	width: 74%;
	margin: auto;
	margin-left: 15px;
}
.el-aside {
	width: 26%;
	height: 100vh;
	margin-right: 20px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
}
.sticky-aside {
	position: sticky;
	top: 0;
	height: 100vh;
}
.main {
	margin-top: 40px;
	border-radius: 10px;
}
.timer {
	width: 70%;
	margin-top: 70px;
	margin-left: 15%;
	background-color: whitesmoke;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
}
</style>
